<%--
  Copyright &copy; Well All rights reserved.
  User: Well
  Date:2018-03-03
  Description:easyui的datagrid控件
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<table id="datagrid"></table>

<div id="toolbar" data-options="title:'datagrid查询',collapsible:true,border:false,width:'100%'">
    <form id="datagrid_query_form">
        <table class="">
            <tr>
                <td>
                    <input class="easyui-textbox" name="username" data-options="label:'用户名称：'" />
                </td>
                <td>
                    <input class="easyui-textbox" name="password" data-options="label:'用户密码：'" />
                </td>
                <td>
                    <a href="javascript:$('#datagrid').datagrid('query','#datagrid_query_form');" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
                    <a href="javascript:$('#datagrid_query_form').form('clear');" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">清空</a>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <a href="javascript:$.messager.alert('提示','您点击了查询按钮','info');" class="easyui-linkbutton" data-options="iconCls:'icon-query'">查询</a>
                    <a href="javascript:$.messager.show({title:'提示',msg:'您点击了新增按钮'});" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加</a>
                    <a href="javascript:$.messager.prompt('提示','请输入：',function(r){if(r){$.messager.alert('提示','您输入的是：<br/>'+r,'info');}});" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a>
                    <a href="javascript:$('#datagrid').datagrid('deleteChecked','${ctx}/demo/easyui/deleteByIds');" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除checked</a>
                    <a href="javascript:$('#datagrid').datagrid('deleteSelections','${ctx}/demo/easyui/deleteByIds');" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除selections</a>
                    <a href="javascript:$.messager.confirm('提示','确定删除？',function(r){if(r){$('#datagrid').datagrid('deleteRow',0)}});" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
                    <a href="javascript:$.messager.show({title:'提示',msg:'您点击了刷新按钮'});" class="easyui-linkbutton" data-options="iconCls:'icon-refresh'">刷新</a>
                </td>
            </tr>
        </table>
    </form>
</div>

<script type="text/javascript">

    var datagrid=$("#datagrid").datagrid({
        url:"${ctx}/demo/easyui/selectDatagrid",
        pagination:true,
        toolbar:"#toolbar",
        columns:[[
            {field:"id",title:"主键",checkbox:true,align:"center"},
            {field:"username",title:"用户名称",width:"30%",align:"center"},
            {field:"userInfo.gender",title:"性别",width:"30%",align:"center"},
            {field:"userInfo.birthday",title:"生日",width:"39%",align:"center"}
        ]]/*,
        onBeforeLoad:function(params){
            console.log(params);
        }*/
    });

</script>
